<template>
	<div class="footer">
		共用尾部模块，这里只是一个案列
	</div>
</template>
<script>
	export default {
		data: function(){
			return {
				
			};
		}
	}
</script>
<style lang="scss">
@import '../../assets/css/common.scss';
	$fontSize11: rem(11);
	$fontSize12: rem(12);
	$fontSize14: rem(14);
	$fontSize22: rem(22);
	@mixin back-gauge{
		padding:rem(0) rem(12);
	}
	.client-data-list{
		width:100%;
		overflow:hidden;
	}
	.client-data-item{
		margin-bottom:rem(14);
		border-top:1px solid #ebe3e0;
		border-bottom:1px solid #ebe3e0;
		background-color:#fff;
		.item-btn{
			width:100%;
			height:100%;
			display:block;
		}
		.item-head{
			@include back-gauge;
			height:rem(44);
			line-height:rem(44);
			font-size:$fontSize14;
			color:#332b29;
			border-bottom:1px solid #eee7e5;
			.user-name{ //用户姓名
				line-height:rem(44);
				float:left;
			}
			.user-phone{//联系电话
				line-height:rem(44);
				float:right;
			}
			.icon-Angle{
				display:inline-block;
				position:relative;
				padding:rem(1) rem(2);
				height:rem(13);
				line-height:rem(13);
				font-size:$fontSize11;
				color:#ffffff;
				background-color:#ef6f58;
				border-right:1px solid #ef6f58;
				vertical-align: middle;
			}
			.icon-Angle:after,.icon-Angle:before{
				width:0;
				height:0;
				content:'';
				display:block;
				position:absolute;
				right:rem(-7);
			}
			.icon-Angle:after{
				bottom:0;
				border-bottom: rem(7) solid #ef6f58;
				border-right: rem(7) solid transparent;
			}
			.icon-Angle:before{
				top:0;
				border-top: rem(7) solid #ef6f58;
   				border-right: rem(7) solid transparent;
			}
		}
		.item-body{
			height:rem(80);
			display:flex;
			padding:rem(10) 0;
			.flex-item{
				width:33%;
				height:rem(40);
				flex-grow:2;
				-webkit-box-flex: 0;
				padding:rem(10) 0;
				border-right:1px solid #eee7e5;
				box-sizing: content-box;
				display:inline-block;
				color:#000;
			}
			.data-val{
				text-align:center;
				font-size:$fontSize22;
				display:block;
			}
			.data-title{
				text-align:center;
				font-size:$fontSize12;
				display:block;
			}
			.flex-item:last-of-type{
				border:0;
			}
		}
		.item-body:first-of-type{
			border-top:0;
		}
		.item-foot{
			@include back-gauge;
			height:rem(47);
			line-height:rem(47);
			border-top:1px solid #eee7e5;
			.car-info{//车辆信息
				width:rem(170);
				display:inline-block;
				font-size:$fontSize14;
				float:left;
				color:#332b29;
			}
			.store-date{//到点时间
				font-size:$fontSize12;
				float:right;
				color:#a68f88;
			}
		}
	}
</style>